<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>client</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            padding:30px;
            border: 10px solid red;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <script>
       var d1 =  document.getElementsByTagName('div')[0]
    //   获取元素的可见高度 width+padding
       console.log(d1.clientHeight,d1.clientWidth,);

    //   获取元素的上border 左border
        console.log(d1.clientTop,d1.clientLeft);


        // 获取显示器的分辨率 onresize方法在窗口大小发生改变的时候调用
        window.onresize = function () {
        document.title = window.screen.width + "    " + window.screen.height;
    }
    </script>
</body>
</html> 